<template>
  <div class="container">
    <!-- 使我们的路由生效 -->
    <router-view></router-view>
    <Footer />
  </div>
  <!-- App.vue有各个页面的 -->
</template>
<script>
import Footer from '../src/components/Footer'
export default {
  components: {
    Footer
  }
}
</script>
<style lang="scss"  >
// @符号表示src文件夹
@import "@/lib/reset.scss";
html,
body,
.container {
  @include rect(100%, 100%); // 宽高为100% width
}
.container {
  @include flexbox(); // 弹性盒子布局的兼容写法
  @include flex-direction(column); // 垂直方向上的弹性盒，避免写兼容的问题
  .box {
    @include flex(); // flex的兼容写法 flex=1
    @include rect(100%, auto); // 消除默认的宽度为.1px
    @include overflow(); // 内容过多多可以滚动
    @include flexbox(); // 弹性盒子布局的兼容写法
    @include flex-direction(column); // 垂直方向上的弹性盒，避免写兼容的问题
    .header {
      @include rect(100%, 0.44rem);
      @include background-color(#f66);
    }
    .content {
      @include flex(); // flex的兼容写法 flex=1
      @include rect(100%, auto); // 消除默认的宽度为.1px
      @include overflow(); // 内容过多多可以滚动
    }
  }
  .footer {
    @include rect(100%, 0.5rem); // 1rem等于100px
    @include background-color(#efefef);
    ul {
      @include rect(100%, 100%);
      @include flexbox();
      li {
        @include flex();
        @include rect(auto,100%);
        @include flexbox();
        @include flex-direction(column);
        @include justify-content();
        @include align-items(); // 函数默认的值的center
        &.router-link-exact-active{
          @include color(red)
        }
      }
    }
  }
}
</style>
